<template>
  <s-layout title="编辑发布" navbar="inner" :bgStyle="{ color: '#f8f9fa' }">
    <view class="edit-release-page">
      <view class="form-container">
        <view class="form-group">
          <text class="form-label">标题</text>
          <input 
            class="form-input" 
            v-model="formData.title" 
            placeholder="请输入标题"
            maxlength="50"
          />
        </view>
        
        <view class="form-group">
          <text class="form-label">类型</text>
          <view class="type-selector">
            <view 
              class="type-item"
              :class="{ active: formData.type === type.value }"
              v-for="type in releaseTypes" 
              :key="type.value"
              @tap="selectType(type.value)"
            >
              {{ type.name }}
            </view>
          </view>
        </view>
        
        <view class="form-group">
          <text class="form-label">内容简介</text>
          <textarea 
            class="form-textarea" 
            v-model="formData.synopsis" 
            placeholder="请输入内容简介"
            maxlength="200"
            rows="4"
          />
        </view>
        
        <view class="form-group">
          <text class="form-label">详细内容</text>
          <textarea 
            class="form-textarea detailed-content" 
            v-model="formData.content" 
            placeholder="请输入详细内容"
            maxlength="1000"
            rows="6"
          />
        </view>
        
        <view class="form-group">
          <text class="form-label">图片</text>
          <view class="image-upload">
            <view class="image-list">
              <view class="image-item" v-for="(image, index) in imageList" :key="index">
                <image :src="image" class="uploaded-image" mode="aspectFill" />
                <view class="delete-btn" @tap="deleteImage(index)">×</view>
              </view>
              <view class="upload-btn" @tap="chooseImage" v-if="imageList.length < 6">
                <text class="upload-icon">+</text>
                <text class="upload-text">添加图片</text>
              </view>
            </view>
            <text class="image-tip">最多可上传6张图片</text>
          </view>
        </view>
        
        <view class="form-group">
          <text class="form-label">标签</text>
          <input 
            class="form-input" 
            v-model="formData.tags" 
            placeholder="请输入标签，多个标签用逗号分隔"
          />
        </view>
        
        <view class="form-group">
          <text class="form-label">联系方式</text>
          <input 
            class="form-input" 
            v-model="formData.phone" 
            placeholder="请输入联系方式"
          />
        </view>
        
        <view class="form-group">
          <text class="form-label">地址</text>
          <view class="address-selector" @tap="selectAddress">
            <text class="address-text" v-if="formData.address">{{ formData.address }}</text>
            <text class="address-placeholder" v-else>请选择地址</text>
            <text class="address-arrow">></text>
          </view>
        </view>
      </view>
      
      <view class="footer-buttons">
        <button class="cancel-btn" @tap="cancel">取消</button>
        <button class="save-btn" @tap="saveRelease" :loading="saving">保存</button>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import sheep from '@/sheep'

const releaseTypes = ref([
  { value: 2, name: '推荐' },
  { value: 3, name: '视频' },
  { value: 7, name: '文旅' }
])

const formData = reactive({
  id: null,
  title: '',
  type: 2,
  synopsis: '',
  content: '',
  pics: '',
  tags: '',
  phone: '',
  address: ''
})

const imageList = ref([])
const saving = ref(false)

onLoad((options) => {
  if (options.id) {
    formData.id = options.id
    loadReleaseData()
  }
})

async function loadReleaseData() {
  try {
    const res = await sheep.$api.release.getById(formData.id)
    if (res) {
      Object.assign(formData, res)
      if (res.pics) {
        imageList.value = res.pics.split(',').filter(pic => pic.trim())
      }
    }
  } catch (error) {
    console.error('加载发布数据失败:', error)
    uni.showToast({ title: '加载失败', icon: 'none' })
  }
}

function selectType(type) {
  formData.type = type
}

function chooseImage() {
  uni.chooseImage({
    count: 6 - imageList.value.length,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePaths = res.tempFilePaths
      tempFilePaths.forEach(filePath => {
        imageList.value.push(filePath)
      })
    }
  })
}

function deleteImage(index) {
  imageList.value.splice(index, 1)
}

function selectAddress() {
  uni.chooseLocation({
    success: (res) => {
      formData.address = res.address
    }
  })
}

async function saveRelease() {
  if (!formData.title.trim()) {
    uni.showToast({ title: '请输入标题', icon: 'none' })
    return
  }
  
  if (!formData.synopsis.trim()) {
    uni.showToast({ title: '请输入内容简介', icon: 'none' })
    return
  }
  
  saving.value = true
  
  try {
    formData.pics = imageList.value.join(',')
    
    if (formData.id) {
      await sheep.$api.release.edit(formData)
      uni.showToast({ title: '更新成功', icon: 'success' })
    } else {
      await sheep.$api.release.add(formData)
      uni.showToast({ title: '创建成功', icon: 'success' })
    }
    
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
    
  } catch (error) {
    console.error('保存失败:', error)
    uni.showToast({ title: '保存失败', icon: 'none' })
  } finally {
    saving.value = false
  }
}

function cancel() {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.edit-release-page {
  padding: 20rpx;
  padding-bottom: 120rpx;
}

.form-container {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
}

.form-group {
  margin-bottom: 40rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.form-label {
  display: block;
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 1px solid #e6e6e6;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  background: #f8f9fa;
}

.form-textarea {
  width: 100%;
  border: 1px solid #e6e6e6;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  background: #f8f9fa;
  resize: none;
  
  &.detailed-content {
    min-height: 240rpx;
  }
}

.type-selector {
  display: flex;
  gap: 20rpx;
}

.type-item {
  padding: 16rpx 32rpx;
  border: 1px solid #e6e6e6;
  border-radius: 40rpx;
  font-size: 28rpx;
  color: #666;
  text-align: center;
  
  &.active {
    background: #007aff;
    color: #fff;
    border-color: #007aff;
  }
}

.image-upload {
  .image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    margin-bottom: 20rpx;
  }
  
  .image-item {
    position: relative;
    width: 200rpx;
    height: 200rpx;
    border-radius: 8rpx;
    overflow: hidden;
    
    .uploaded-image {
      width: 100%;
      height: 100%;
    }
    
    .delete-btn {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      width: 40rpx;
      height: 40rpx;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      font-weight: bold;
    }
  }
  
  .upload-btn {
    width: 200rpx;
    height: 200rpx;
    border: 2rpx dashed #ddd;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    .upload-icon {
      font-size: 48rpx;
      color: #ccc;
      margin-bottom: 10rpx;
    }
    
    .upload-text {
      font-size: 24rpx;
      color: #ccc;
    }
  }
  
  .image-tip {
    font-size: 24rpx;
    color: #999;
  }
}

.address-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80rpx;
  border: 1px solid #e6e6e6;
  border-radius: 8rpx;
  padding: 0 20rpx;
  background: #f8f9fa;
  
  .address-text {
    font-size: 28rpx;
    color: #333;
  }
  
  .address-placeholder {
    font-size: 28rpx;
    color: #999;
  }
  
  .address-arrow {
    font-size: 28rpx;
    color: #999;
  }
}

.footer-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #fff;
  border-top: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  gap: 20rpx;
  
  .cancel-btn {
    flex: 1;
    height: 72rpx;
    border: 1px solid #e6e6e6;
    border-radius: 36rpx;
    font-size: 28rpx;
    color: #666;
    background: #fff;
  }
  
  .save-btn {
    flex: 1;
    height: 72rpx;
    border: none;
    border-radius: 36rpx;
    font-size: 28rpx;
    color: #fff;
    background: #007aff;
  }
}
</style> 